<template>
	<div class="custom">
		<div class="content-bg" v-if="showDefault">
			<div class="main-title">欢 迎 登 录</div>
			<div class="sub-title">杭州晟原数字技术有限公司</div>
		</div>
		<div v-if="type === 1">
			<z-swiper autoplay fullScreen :list='list' :interval="interval" :num="num"
				@setSwiperOver="setSwiperOver">
			</z-swiper>
		</div>
		<div v-if="type === 2">
			<ss-preview :fileUrl="pdfObj.fileUrl" :fileType="pdfObj.fileType" :imageList="[pdfObj.fileUrl]"></ss-preview>
		</div>
	</div>
</template>

<script>
	import zSwiper from '@/components/z-swiper/index.vue'
	export default {
		components: {
			zSwiper
		},
		data: () => ({
			list: [],
			interval: 3 * 1000,
			num: 0,
			// list: [{
			// 		type: 'video',
			// 		src: 'http://vjs.zencdn.net/v/oceans.mp4',
			// 	},
			// 	{
			// 		type: 'image',
			// 		src: 'http://47.96.170.158:8090/admin-api/infra/file/4/get/def0fb2035120903a98d6f7cff42ba444d08fa9b1d17b0f7f0fcce36c40a6b66.png'
			// 	},
			// 	{
			// 		type: 'image',
			// 		src: 'https://b.bdstatic.com/searchbox/icms/searchbox/img/cheng_boy.png'
			// 	},
			// ],
			showDefault: true,
			pingTimeout: null,
			type: 0, // 轮播1、 进度2
			// pdfObj: {
			// 	fileUrl: 'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf',
			// 	fileType: '2',
			// },
			pdfObj: null,
		}),
		onLoad() {
			this.getData()
		},
		methods: {
			setSwiperOver() {
				console.log('setSwiperOver')
				this.showDefault = true
			},
			//心跳检测
			handleHeart() {
				setInterval(() => {
					this.send();
					this.pingTimeout = setTimeout(() => {
						console.log('未收到pong消息，尝试重连...')
						this.getData();
					}, 1000);
				}, 5000);
			},
			send() {
				const deviceId = uni.getStorageSync('deviceId');
				const data = JSON.stringify({
					message: 'ping',
					code: deviceId,
				})
				console.log('send',
					data)
				uni.sendSocketMessage({
					data: data,
					fail: function() {
						console.log('发送消息失败！');
					},
					success: function() {
						console.log('发发送消息成功！');
					}
				});
			},
			getData() {
				const userInfo = uni.getStorageSync('userInfo');
				uni.connectSocket({
					url: `ws://47.99.160.107:8090/infra/ws?token=${userInfo.accessToken}`
				});
				uni.onSocketOpen((res) => {
					console.log('WebSocket连接已打开！');
					this.handleHeart()
				});
				uni.onSocketError((res) => {
					console.log('WebSocket连接打开失败，请检查！');
				});
				uni.onSocketMessage((res) => {
					console.log('收到服务器内容：' + res.data);
					if (res.data) {
						if (res?.data === 'pong') {
							clearTimeout(this.pingTimeout)
							return
						}
						const data = JSON.parse(res.data)
						if (data.type === 'receiveProcess') {
							if (data?.content) {
								let receiveProcessData = JSON.parse(data.content)
								if (receiveProcessData?.length) {
									console.log('receiveProcessData', receiveProcessData)
									this.pdfObj = receiveProcessData[0].type === 'pdf' ? {
										fileUrl: receiveProcessData[0].url,
										fileType: '2'
									} : {
										fileUrl: receiveProcessData[0].url,
										fileType: '1'
									}
									this.showDefault = false
									this.type = 2
								} else {
									console.log('pdf无数据1')
									this.showDefault = true
								}
							} else {
								console.log('pdf无数据2')
								this.showDefault = true
							}
							return
						}
						
						if (data?.content) {
							let data1 = JSON.parse(data.content)
							if (data1?.length) {
								this.interval = data1[0]?.interval * 1000
								this.num = data1[0].isKeep ? data1[0].num : 0
								let list = data1[0]?.receiveMessageList || []
								if (list?.length) {
									let dataList = list.map((e) => {
										return {
											...e,
											type: e.type === 'video/mp4' ? 'video' : 'image',
											src: e.url,
										}
									})
									console.log('dataList', dataList)
									if (dataList.length === 1) {
										this.list = new Array(this.num).fill(dataList[0]);
										console.log('this.list', this.list)
										this.num = 1
									} else {
										this.list = dataList
									}
									this.showDefault = false
									this.type = 1
								} else {
									console.log('无数据2')
									this.showDefault = true
								}
							} else {
								console.log('无数据1')
								this.showDefault = true
							}
						}
					} else {
						console.log('无数据')
						this.showDefault = true
					}
				});
			}
		},
	};
</script>
<style lang="scss">
	page {
		height: 100%;
	}

	.custom {
		height: 100%;
	}

	.content-bg {
		width: 100%;
		height: 100%;
		background-image: url('../../../static/bg.png');
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #fff;

		.main-title {
			font-size: 100px;
			line-height: 137px;
			margin-bottom: 46px;
		}

		.sub-title {
			font-size: 32px;
			line-height: 44px;
		}
	}

	.content {
		background-color: #999;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>